<template>
  <div>
    <nav-top title="常用预约用户"
      :goback='true'
    />
    <!-- 联系人卡片 -->
<van-contact-card
  :type="cardType"
  :name="currentContact.name"
  :tel="currentContact.tel"
  @click="showList = true"
/>

<!-- 联系人列表 -->
<van-popup v-model="showList" position="bottom">
  <van-contact-list
    v-model="chosenContactId"
    :list="list"
    @add="onAdd"
    @edit="onEdit"
    @select="onSelect"
  />
</van-popup>

<!-- 联系人编辑 -->
<van-popup v-model="showEdit" position="bottom">
  <van-contact-edit
    :contact-info="editingContact"
    :is-edit="isEdit"
    @save="onSave"
    @delete="onDelete"
  />
</van-popup>
    <div class="img">
      <img src="/static/img/member/noUser.png"
        v-show="false"
        alt="">
        <div v-show="IsUser" style="text-align: center;">暂无常用预约用户</div>
    </div>
    <!--
    <div>
      <button class='add' @click='addUser'>添加常用预约用户</button>
    </div>-->
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
export default {
  data:()=>({
    IsUser: false,
    chosenContactId: null,
      editingContact: {},
      showList: false,
      showEdit: false,
      isEdit: false,
      list: [{
        name: '张三',
        tel: '13000000000',
        id: 0
      }]
  }),
    computed: {
    cardType() {
      return this.chosenContactId !== null ? 'edit' : 'add';
    },

    currentContact() {
      const id = this.chosenContactId;
      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
    }
  },

  methods: {
    // 添加联系人
    onAdd() {
      this.editingContact = { id: this.list.length };
      this.isEdit = false;
      this.showEdit = true;
    },

    // 编辑联系人
    onEdit(item) {
      this.isEdit = true;      
      this.showEdit = true;
      this.editingContact = item;
    },

    // 选中联系人
    onSelect() {
      this.showList = false;
    },

    // 保存联系人
    onSave(info) {
      this.showEdit = false;
      this.showList = false;
      
      if (this.isEdit) {
        this.list = this.list.map(item => item.id === info.id ? info : item);
      } else {
        this.list.push(info);
      }
      this.chosenContactId = info.id;
    },

    // 删除联系人
    onDelete(info) {
      this.showEdit = false;
      this.list = this.list.filter(item => item.id !== info.id);
      if (this.chosenContactId === info.id) {
        this.chosenContactId = null;
      }
    }
  },
  components: {
    NavTop,
  },methods:{addUser(){this.$router.push('/addCommonUser'
  )}}
}
</script>

<style lang="scss" scoped>
.img {
  width: 320px;
  height: 129px;
  margin: 174px 0 0 0;
  img {
    width: 100%;
  }
}
.add {
  width: 279px;
  height: 44px;
  margin: 120px 20.5px 0 20.5px;
  // position: absolute;
  // left: 21px;
  // bottom: 15px;
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  background: #06a44f;
  border: none;
}
</style>